<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>4_createRef</title>
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>
</head>

<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>

	<script type="text/babel">

		// 1.创建组件
		class Demo extends React.Component {
			/*
				React.createRef()调用后返回一个容器,该容器能够存储被ref标识的节点
				通过React.createRef()创建的容器只能包含一个ref节点{current,dom}
			*/
			myRef = React.createRef()
			myRef2 = React.createRef()

			showData = () => {
				const { myRef } = this
				console.log(myRef.current.value);
			}
			showData2 = () => {
				const { myRef2 } = this
				console.log(myRef2.current.value);
			}


			render() {
				console.log(this);
				return (
					<div>
						{/*给下面节点绑定ref为组件实例的myRef容器,下面节点就会保存到容器中(current:input节点)*/}
						<input ref={this.myRef} type="text" placeholder="请输入数据" />
						<button onClick={this.showData}>点我提示数据</button>
						<input ref={this.myRef2} type="text" placeholder="请输入数据" onBlur={this.showData2} />
					</div>
				)
			}
		}

		// 2.渲染组件到页面
		ReactDOM.render(<Demo />, document.getElementById('test'))
	</script>
</body>

</html>